<template>
  <el-button
    style="height: 100%"
    v-once-click
    color="#626aef"
    plain
    :icon="Avatar"
    @click="dialogVisible = true"
  >
    脱敏认证
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="脱敏信息认证"
    width="340"
    center
    align-center
    :showClose="false"
    :before-close="handleClose"
  >
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20px;
      "
    >
      <div
        style="
          width: 70px;
          letter-spacing: 1px;
          font-weight: bold;
          color: #606266;
        "
      >
        输入密码:
      </div>
      <el-input
        v-model="password"
        style="width: 220px"
        type="password"
        placeholder="Please input password"
      />
    </div>

    <template #footer>
      <el-button style="width: 80px" type="info" @click="handleClose">
        取消
      </el-button>
      <el-button style="width: 140px" color="#626aef" @click="verify">
        认证
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="tsx" setup>
import { ref } from 'vue'
import 'element-plus/theme-chalk/el-message.css'
import { Avatar } from '@element-plus/icons-vue'
import { useDesensitizeVerifyStore } from '@/features/store/store'

const { desensitizeDataVerify } = useDesensitizeVerifyStore()

// 定义传递给父组件的方法
const emits = defineEmits(['successHandler'])
const successHandler = () => emits('successHandler')

const password = ref<string>('')
const dialogVisible = ref<boolean>(false)
const handleClose = () => {
  dialogVisible.value = false
  password.value = ''
}

const verify = async () => {
  const b = await desensitizeDataVerify(password.value)
  if (b) {
    password.value = ''
    dialogVisible.value = false
    successHandler()
  }
}
</script>

<style lang="less" scoped></style>
